<template>
  <div class="layout-wrapper" :class="{ 'sidebar-collapsed': collapsed }">
    <Sidebar v-model:collapsed="collapsed" />
    <div class="main-container">
      <Header v-model:collapsed="collapsed" @openProfileDrawer="openProfileDrawer" />
      <div class="app-main" :class="{ 'collapsed-sidebar': collapsed }">
        <router-view :key="viewKey" v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <!-- 暂时禁用keep-alive以确保每次都加载最新内容 -->
            <!-- <keep-alive :include="cachedViews"> -->
            <component :is="Component" />
            <!-- </keep-alive> -->
          </transition>
        </router-view>
      </div>
    </div>

    <!-- 用户信息查看抽屉 -->
    <GlobalDrawer
      v-model="viewProfileDrawerVisible"
      :title="profileType === 'lawyer' ? '律师档案详情' : '员工档案详情'"
      size="80%"
      :show-footer-buttons="false"
    >
      <!-- 员工档案详情 -->
      <div v-if="profileType === 'admin'">
        <!-- 基本信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">基本信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="员工姓名">
                  {{ viewProfileData.name }}
                </el-descriptions-item>
                <el-descriptions-item label="工号">
                  {{ viewProfileData.job_number }}
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                  {{ viewProfileData.sex === 1 ? '男' : '女' }}
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                  {{ viewProfileData.mobile }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="邮箱">
                  {{ viewProfileData.email }}
                </el-descriptions-item>
                <el-descriptions-item label="部门">
                  {{ viewProfileData.department_name }}
                </el-descriptions-item>
                <el-descriptions-item label="职位">
                  {{ viewProfileData.position_name }}
                </el-descriptions-item>
                <el-descriptions-item label="入职日期">
                  {{ viewProfileData.entry_date ? formatDate(viewProfileData.entry_date) : '' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 教育背景 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">教育背景</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="学历">
                  {{ viewProfileData.education }}
                </el-descriptions-item>
                <el-descriptions-item label="专业">
                  {{ viewProfileData.speciality }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="毕业院校">
                  {{ viewProfileData.graduate_school }}
                </el-descriptions-item>
                <el-descriptions-item label="毕业日期">
                  {{ viewProfileData.graduate_day ? formatDate(viewProfileData.graduate_day) : '' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 身份信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">身份信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="身份证号">
                  {{ viewProfileData.idcard }}
                </el-descriptions-item>
                <el-descriptions-item label="生日">
                  {{ viewProfileData.birthday ? formatDate(viewProfileData.birthday) : '' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="籍贯">
                  {{ viewProfileData.native_place }}
                </el-descriptions-item>
                <el-descriptions-item label="民族">
                  {{ viewProfileData.nation }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 联系方式 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">联系方式</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="家庭地址">
                  {{ viewProfileData.home_address }}
                </el-descriptions-item>
                <el-descriptions-item label="紧急联系人">
                  {{ viewProfileData.contact }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="现居地址">
                  {{ viewProfileData.current_address }}
                </el-descriptions-item>
                <el-descriptions-item label="紧急联系电话">
                  {{ viewProfileData.contact_mobile }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 其他信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">其他信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="个人简介">
                  {{ viewProfileData.desc }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 律师档案详情 -->
      <div v-else-if="profileType === 'lawyer'">
        <!-- 基本信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">基本信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="律师姓名">
                  {{ viewProfileData.name }}
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                  {{ viewProfileData.mobile }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="邮箱">
                  {{ viewProfileData.email }}
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                  {{ viewProfileData.sex === 1 ? '男' : '女' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 执业信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">执业信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="执业证号">
                  {{ viewProfileData.idcard }}
                </el-descriptions-item>
                <el-descriptions-item label="执业律所">
                  {{ viewProfileData.firm_name }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="律师类型">
                  {{ viewProfileData.type === 0 ? '注册律师' : '合作律师' }}
                </el-descriptions-item>
                <el-descriptions-item label="首次执业日期">
                  {{ viewProfileData.entry_time ? formatDate(viewProfileData.entry_time) : '' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 教育背景 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">教育背景</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="毕业院校">
                  {{ viewProfileData.education }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="获得荣誉">
                  {{ viewProfileData.honor }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 专业信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">专业信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="擅长领域">
                  {{ viewProfileData.adept }}
                </el-descriptions-item>
                <el-descriptions-item label="律师个人简介">
                  {{ viewProfileData.desc }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <div class="profile-actions" style="text-align: center; margin-top: 20px">
        <el-button type="primary" @click="openEditProfileDrawer">编辑资料</el-button>
      </div>
    </GlobalDrawer>

    <!-- 用户信息编辑抽屉 -->
    <GlobalDrawer
      v-model="editProfileDrawerVisible"
      :title="profileType === 'lawyer' ? '编辑律师档案' : '编辑员工档案'"
      size="80%"
      @confirm="handleSaveProfile"
      @close="handleEditProfileDrawerClose"
    >
      <!-- 员工档案编辑表单 -->
      <el-form
        v-if="profileType === 'admin'"
        ref="profileFormRef"
        :model="editProfileData"
        label-width="120px"
      >
        <!-- 基本信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">基本信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="员工姓名" prop="name">
                <el-input v-model="editProfileData.name" placeholder="请输入员工姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工号" prop="job_number">
                <el-input v-model="editProfileData.job_number" placeholder="请输入工号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="editProfileData.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="editProfileData.mobile" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="editProfileData.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门" prop="did">
                <el-select
                  v-model="editProfileData.did"
                  placeholder="请选择部门"
                  style="width: 100%"
                  disabled
                >
                  <el-option
                    :label="editProfileData.department_name"
                    :value="editProfileData.did"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职位" prop="position_id">
                <el-select
                  v-model="editProfileData.position_id"
                  placeholder="请选择职位"
                  style="width: 100%"
                  disabled
                >
                  <el-option
                    :label="editProfileData.position_name"
                    :value="editProfileData.position_id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入职日期" prop="entry_time">
                <el-date-picker
                  v-model="editProfileData.entry_time"
                  type="date"
                  placeholder="请选择入职日期"
                  style="width: 100%"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 教育背景 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">教育背景</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="学历" prop="education">
                <el-select
                  v-model="editProfileData.education"
                  placeholder="请选择学历"
                  style="width: 100%"
                >
                  <el-option label="小学" value="小学" />
                  <el-option label="初中" value="初中" />
                  <el-option label="高中" value="高中" />
                  <el-option label="大专" value="大专" />
                  <el-option label="本科" value="本科" />
                  <el-option label="硕士" value="硕士" />
                  <el-option label="博士" value="博士" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业" prop="speciality">
                <el-input v-model="editProfileData.speciality" placeholder="请输入专业" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="毕业院校" prop="graduate_school">
                <el-input v-model="editProfileData.graduate_school" placeholder="请输入毕业院校" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业日期" prop="graduate_day">
                <el-date-picker
                  v-model="editProfileData.graduate_day"
                  type="date"
                  placeholder="请选择毕业日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 身份信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">身份信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="editProfileData.idcard" placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生日" prop="birthday">
                <el-date-picker
                  v-model="editProfileData.birthday"
                  type="date"
                  placeholder="请选择生日"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="籍贯" prop="native_place">
                <el-input v-model="editProfileData.native_place" placeholder="请输入籍贯" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="nation">
                <el-input v-model="editProfileData.nation" placeholder="请输入民族" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 联系方式 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">联系方式</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="家庭地址" prop="home_address">
                <el-input v-model="editProfileData.home_address" placeholder="请输入家庭地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="现居地址" prop="current_address">
                <el-input v-model="editProfileData.current_address" placeholder="请输入现居地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="紧急联系人" prop="contact">
                <el-input v-model="editProfileData.contact" placeholder="请输入紧急联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急联系电话" prop="contact_mobile">
                <el-input
                  v-model="editProfileData.contact_mobile"
                  placeholder="请输入紧急联系电话"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 其他信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">其他信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="个人简介" prop="desc">
                <el-input
                  v-model="editProfileData.desc"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入个人简介"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <!-- 律师档案编辑表单 -->
      <el-form
        v-else-if="profileType === 'lawyer'"
        ref="profileFormRef"
        :model="editProfileData"
        label-width="120px"
      >
        <!-- 基本信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">基本信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="律师姓名" prop="name">
                <el-input v-model="editProfileData.name" placeholder="请输入律师姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="editProfileData.mobile" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="editProfileData.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="editProfileData.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 执业信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">执业信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="执业证号" prop="idcard">
                <el-input v-model="editProfileData.idcard" placeholder="请输入执业证号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="执业律所" prop="firm_name">
                <el-input v-model="editProfileData.firm_name" placeholder="请输入执业律所" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="律师类型" prop="type">
                <el-select
                  v-model="editProfileData.type"
                  placeholder="请选择律师类型"
                  style="width: 100%"
                  disabled
                >
                  <el-option label="注册律师" :value="0" />
                  <el-option label="合作律师" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="首次执业日期" prop="entry_time">
                <el-date-picker
                  v-model="editProfileData.entry_time"
                  type="date"
                  placeholder="请选择首次执业日期"
                  style="width: 100%"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 教育背景 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">教育背景</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="毕业院校" prop="education">
                <el-input v-model="editProfileData.education" placeholder="请输入毕业院校" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="获得荣誉" prop="honor">
                <el-input v-model="editProfileData.honor" placeholder="请输入获得荣誉" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 专业信息 -->
        <el-card class="form-section" shadow="never">
          <template #header>
            <div class="form-section-header">专业信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="擅长领域" prop="adept">
                <el-input v-model="editProfileData.adept" placeholder="请输入擅长领域" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="律师个人简介" prop="desc">
                <el-input
                  v-model="editProfileData.desc"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入律师个人简介"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </GlobalDrawer>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus' // 导入ElMessage和ElMessageBox
  import type { FormInstance } from 'element-plus'
  import Sidebar from './components/Sidebar.vue'
  import Header from './components/Header.vue'
  import GlobalDrawer from '@/components/common/GlobalDrawer.vue'
  import { useUserStore } from '@/store/user'
  import { archivesApi } from '@/api/user/archives'

  // 获取当前路由和路由器
  const route = useRoute()
  const router = useRouter()

  // 获取用户状态管理
  const userStore = useUserStore()

  // 侧边栏折叠状态
  const collapsed = ref(false)

  // 用户信息查看抽屉可见性
  const viewProfileDrawerVisible = ref(false)

  // 用户信息编辑抽屉可见性
  const editProfileDrawerVisible = ref(false)

  // 用户信息
  const userInfo = computed(() => userStore.userInfo)

  // 查看档案数据
  const viewProfileData = ref<any>({})

  // 编辑档案数据
  const editProfileData = ref<any>({})

  // 表单引用
  const profileFormRef = ref<FormInstance>()

  // 档案类型
  const profileType = ref<'admin' | 'lawyer'>('admin')

  // 使用路由fullPath作为viewKey，确保路由变化时组件能正确更新
  // 但避免不必要的重复渲染
  const viewKey = computed(() => {
    // 只使用路由路径作为key，不包含时间戳，避免不必要的重新渲染
    return route.fullPath
  })

  // 控制侧边栏折叠
  const toggleSidebar = () => {
    collapsed.value = !collapsed.value
  }

  // 格式化日期
  const formatDate = (timestamp: any) => {
    if (!timestamp || timestamp === '') return ''
    // 确保是数字类型
    const numTimestamp = typeof timestamp === 'number' ? timestamp : Number(timestamp)
    if (isNaN(numTimestamp) || numTimestamp <= 0) return ''
    // 检查是否为秒级时间戳（小于等于10位数字）
    const timestampMs = String(numTimestamp).length <= 10 ? numTimestamp * 1000 : numTimestamp
    const date = new Date(timestampMs)
    // 检查日期是否有效
    if (isNaN(date.getTime())) return ''
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
  }

  // 格式化日期用于输入控件
  const formatDateForInput = (timestamp: any) => {
    // 处理空值情况
    if (!timestamp || timestamp === '' || timestamp <= 0) return undefined

    // 如果已经是Date对象，直接返回
    if (timestamp instanceof Date) {
      return timestamp
    }

    // 处理字符串日期格式（如果后端返回的是日期字符串）
    if (typeof timestamp === 'string' && timestamp.includes('-')) {
      const date = new Date(timestamp)
      if (!isNaN(date.getTime())) {
        return date
      }
    }

    // 处理数字类型（时间戳）
    const numTimestamp = typeof timestamp === 'number' ? timestamp : Number(timestamp)
    if (isNaN(numTimestamp)) return undefined

    // 检查是否为秒级时间戳（小于等于10位数字）
    const timestampMs = String(numTimestamp).length <= 10 ? numTimestamp * 1000 : numTimestamp
    const date = new Date(timestampMs)

    // 检查日期是否有效且不为1970年
    if (isNaN(date.getTime()) || date.getTime() < 10000000000) return undefined

    return date
  }

  // 安全的日期转换函数
  const convertToTimestamp = (dateValue: any): number | undefined => {
    if (!dateValue) return undefined

    // 如果已经是数字类型的时间戳，直接处理
    if (typeof dateValue === 'number') {
      // 检查是否已经是秒级时间戳（10位或更少）
      const timestampStr = String(dateValue)
      if (timestampStr.length <= 10) {
        return dateValue // 已经是秒级时间戳
      } else {
        return Math.floor(dateValue / 1000) // 毫秒级转换为秒级
      }
    }

    // 处理Date对象或日期字符串
    const dateObj = new Date(dateValue)

    // 检查日期是否有效且不为1970年
    if (isNaN(dateObj.getTime()) || dateObj.getTime() < 10000000000) {
      return undefined
    }

    return Math.floor(dateObj.getTime() / 1000) // 转换为秒级时间戳
  }

  // 打开用户信息抽屉
  const openProfileDrawer = async () => {
    try {
      // 检查用户信息是否存在
      if (!userInfo.value || !userInfo.value.id) {
        ElMessage.error('用户信息不存在')
        return
      }

      // 获取当前用户的档案详情
      const res = await archivesApi.getDetail(userInfo.value.id)
      if (res.code === 0) {
        profileType.value = res.profile_type || 'admin'

        // 设置查看数据
        viewProfileData.value = { ...res.data }

        // 格式化日期字段
        if (profileType.value === 'admin') {
          viewProfileData.value.birthday = formatDateForInput(viewProfileData.value.birthday)
          viewProfileData.value.entry_time = formatDateForInput(viewProfileData.value.entry_time)
          viewProfileData.value.graduate_day = formatDateForInput(
            viewProfileData.value.graduate_day
          )
        } else {
          viewProfileData.value.entry_time = formatDateForInput(viewProfileData.value.entry_time)
        }

        viewProfileDrawerVisible.value = true
      } else {
        ElMessage.error(res.msg || '获取档案信息失败')
      }
    } catch (error) {
      ElMessage.error('获取档案详情失败')
    }
  }

  // 打开编辑档案抽屉
  const openEditProfileDrawer = () => {
    // 关闭查看抽屉
    viewProfileDrawerVisible.value = false

    // 初始化编辑数据
    editProfileData.value = { ...viewProfileData.value }

    // 格式化日期字段用于编辑
    if (profileType.value === 'admin') {
      editProfileData.value.birthday = formatDateForInput(editProfileData.value.birthday)
      editProfileData.value.entry_time = formatDateForInput(editProfileData.value.entry_time)
      editProfileData.value.graduate_day = formatDateForInput(editProfileData.value.graduate_day)
    } else {
      editProfileData.value.entry_time = formatDateForInput(editProfileData.value.entry_time)
    }

    // 打开编辑抽屉
    editProfileDrawerVisible.value = true
  }

  // 保存档案信息
  const handleSaveProfile = async () => {
    if (!profileFormRef.value) return

    try {
      await profileFormRef.value.validate()

      // 构造提交数据
      const submitData: any = {
        id: editProfileData.value.id,
      }

      if (profileType.value === 'admin') {
        // 普通员工数据
        Object.assign(submitData, {
          name: editProfileData.value.name,
          job_number: editProfileData.value.job_number,
          sex: editProfileData.value.sex,
          mobile: editProfileData.value.mobile,
          email: editProfileData.value.email,
          did: editProfileData.value.did,
          position_id: editProfileData.value.position_id,
          education: editProfileData.value.education,
          speciality: editProfileData.value.speciality,
          idcard: editProfileData.value.idcard,
          birthday: convertToTimestamp(editProfileData.value.birthday),
          native_place: editProfileData.value.native_place,
          nation: editProfileData.value.nation,
          home_address: editProfileData.value.home_address,
          current_address: editProfileData.value.current_address,
          contact: editProfileData.value.contact,
          contact_mobile: editProfileData.value.contact_mobile,
          desc: editProfileData.value.desc,
          entry_time: convertToTimestamp(editProfileData.value.entry_time),
          graduate_school: editProfileData.value.graduate_school,
          graduate_day: convertToTimestamp(editProfileData.value.graduate_day),
        })
      } else {
        // 律师数据
        Object.assign(submitData, {
          name: editProfileData.value.name,
          mobile: editProfileData.value.mobile,
          email: editProfileData.value.email,
          sex: editProfileData.value.sex,
          idcard: editProfileData.value.idcard,
          firm_name: editProfileData.value.firm_name,
          type: editProfileData.value.type,
          education: editProfileData.value.education,
          honor: editProfileData.value.honor,
          adept: editProfileData.value.adept,
          desc: editProfileData.value.desc,
          entry_time: convertToTimestamp(editProfileData.value.entry_time),
        })
      }

      // 提交数据
      const res = await archivesApi.edit(submitData)

      if (res.code === 0) {
        ElMessage.success('保存成功')
        editProfileDrawerVisible.value = false

        // 更新查看数据
        viewProfileData.value = { ...editProfileData.value }

        // 重新打开查看抽屉
        viewProfileDrawerVisible.value = true
      } else {
        ElMessage.error(res.msg || '保存失败')
      }
    } catch (error) {
      ElMessage.error('保存失败')
    }
  }

  // 编辑抽屉关闭处理
  const handleEditProfileDrawerClose = () => {
    if (profileFormRef.value) {
      profileFormRef.value.resetFields()
    }
  }

  // 移除不必要的路由监听和强制刷新逻辑
  // router-view的key已经绑定到route.fullPath，会自动处理路由变化
</script>

<style scoped>
  .layout-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s;
    height: 100vh;
    overflow: hidden;
    position: relative;
    margin-left: 0 !important; /* 使用!important确保覆盖全局样式 */
    padding-left: 0;
    width: 100%;
  }

  /* 强制移除间距的样式 */
  .main-container :deep(.el-main) {
    padding: 0;
  }

  .app-main {
    flex: 1;
    overflow: auto;
    background-color: #f0f2f5;
    position: relative;
    padding: 0; /* 移除内边距 */
  }

  /* 确保内容的容器缩进与侧边栏保持贴合 */
  .app-main > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 侧边栏折叠状态下的特殊处理 */
  .sidebar-collapsed .main-container {
    margin-left: 0;
  }

  /* fade-transform过渡动画 */
  .fade-transform-leave-active,
  .fade-transform-enter-active {
    transition: all 0.3s;
  }

  .fade-transform-enter-from {
    opacity: 0;
    transform: translateX(-30px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  /* 用户信息抽屉样式 */
  .profile-content {
    padding: 20px;
  }

  .profile-actions {
    margin-top: 20px;
    text-align: center;
  }

  .form-section {
    margin-bottom: 20px;
  }

  .form-section :deep(.el-card__header) {
    padding: 10px 20px;
    background-color: #f5f7fa;
  }

  .form-section .form-section-header {
    font-weight: bold;
    color: #303133;
  }

  /* 优化表单布局 */
  :deep(.el-form-item) {
    margin-bottom: 18px;
  }

  :deep(.el-form-item__label) {
    padding-right: 10px;
  }

  /* 优化描述列表布局 */
  :deep(.el-descriptions__label) {
    width: 120px !important;
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
</style>
